<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div th:replace="fragment/js::js"></div>
<div th:replace="fragment/map::map"></div>
<style>
    /*修改layui表格的高度*/
    .layui-table-cell {
        height: auto;
        padding: 2px 5px;
        margin: 0;
    }

    .layui-table-view .layui-table td, .layui-table-view .layui-table th {
        padding: 1px 0;
        border-top: none;
        border-left: none;
    }

    #queryForm > div {
        margin: 10px 5px;
    }
</style>
<body class="layui-card-body layui-card">
<!--搜索栏-->
<!--<form class="layui-form" style="padding:5px 0;display: flex;align-items: center;"-->
<form class="layui-form" style="display: flex;align-items: center;flex-wrap: wrap"
      id="queryForm">
    <div style="display: flex;align-items: center;flex-wrap: nowrap">
        <label class="layui-form-label" style="width: fit-content">商户号</label>
        <input type="text" name="merchantId" id="merchantId" lay-filter="searchInput"
               style="width: 120px" class="layui-input">
    </div>
    <div style="display: flex;align-items: center;flex-wrap: nowrap">
        <label class="layui-form-label" style="width: fit-content">联系人</label>
        <input type="text" name="contactName" id="contactName" lay-filter="searchInput"
               style="width: 120px" class="layui-input">
    </div>
    <div style="display: flex;align-items: center;flex-wrap: nowrap">
        <label class="layui-form-label" style="width: fit-content">地址</label>
        <input type="text" name="address" id="address" lay-filter="searchInput"
               style="width: 120px" class="layui-input">
    </div>
    <div style="display: flex;align-items: center;flex-wrap: nowrap">
        <label class="layui-form-label" style="width: fit-content;">名称</label>
        <input type="text" name="shopName" id="merchantName" lay-filter="searchInput"
               style="width: 120px" class="layui-input">
    </div>
    <div style="display: flex;align-items: center;flex-wrap: nowrap">
        <label class="layui-form-label" style="width: fit-content">电话</label>
        <input type="text" name="phone" id="merchantNote" lay-filter="searchInput"
               style="width: 120px" class="layui-input">
    </div>
    <!--    单选按钮-->
    <div class="layui-form-item" style="margin: 0">
        <label class="layui-form-label" style="width: fit-content">营业状态</label>
        <input type="radio" name="isOpen" lay-filter="isOpenFilter" value="" title="所有" checked>
        <input type="radio" name="isOpen" lay-filter="isOpenFilter" value="1" title="营业中">
        <input type="radio" name="isOpen" lay-filter="isOpenFilter" value="0" title="休息中">
    </div>
    <div class="layui-form-item" style="margin: 0;border: solid lightgray 0.1px;margin-left: 10px">
        <label class="layui-form-label" style="width: fit-content">审核状态</label>
        <input type="radio" name="approvalStatus" lay-filter="isOpenFilter" value="" title="所有" checked>
        <input type="radio" name="approvalStatus" lay-filter="isOpenFilter" value="审核中" title="审核中">
        <input type="radio" name="approvalStatus" lay-filter="isOpenFilter" value="审核通过" title="审核通过">
        <input type="radio" name="approvalStatus" lay-filter="isOpenFilter" value="需重新提交" title="需重新提交">
        <input type="radio" name="approvalStatus" lay-filter="isOpenFilter" value="暂不合作" title="暂不合作">
    </div>
    <div class="layui-form-item" style="margin: 0">
        <button class="layui-btn" style="margin-left: 10px" id="queryBtn" lay-submit lay-filter="queryForm">查询</button>
        <button type="button" class="layui-btn layui-btn-danger" id="delBtn" lay-filter="delBtn" style="margin-left: 10px">删除选中</button>
    </div>
</form>
<script type="text/html" id="addLogDiv">
    <form class="layui-form" style="display: flex">
        <div style="display: flex;align-items: center">
            <label>审核意见</label>
            <input type="text" name="note" placeholder="请输入审核意见"
                   style="width: 300px" class="layui-input">
        </div>
        <div style="display: flex;margin-left: 10px;align-items: center">
            <label>审核结果</label>
            <div class="layui-input-block" style="width: 140px;margin-left: 0">
                <select style="width: 100px" name="res" lay-verify="required">
                    <option value="">请选择审核结果</option>
                    <option>审核通过</option>
                    <option>需重新提交</option>
                    <option>暂不合作</option>
                    <option>审核中</option>
                </select>
            </div>
        </div>
        <button style="margin-left: 10px;" class="layui-btn layui-btn-danger" lay-submit lay-filter="addApprovalLog">
            添加审核意见
        </button>
    </form>
</script>
<script type="text/html" id="logDiv">
    <div id="voucherDiv" style="padding: 10px">
        <table class="layui-table" id="voucherTable" lay-filter="voucherTable">
            <thead>
            <tr>
                <th>店铺Logo</th>
                <th>门脸照</th>
                <th>室内照</th>
                <th>营业执照</th>
                <th>法人身份证头像面</th>
                <th>法人身份证国徽面</th>
                <th>法人手持身份证</th>
                <th>食品安全许可证</th>
                <th>其他证件</th>
            </tr>
            </thead>
            <tbody id="tbody">
            </tbody>

        </table>
        <table id="approvalLogsTable" lay-filter="approvalLogsTable"></table>

    </div>
</script>

<script type="text/html" id="editLogDiv">

    <form class="layui-form" style="padding: 20px">

        <input type="radio" name="res" value="审核中" title="审核中"><br/>
        <input type="radio" name="res" value="审核通过" title="审核通过"><br/>
        <input type="radio" name="res" value="需重新提交" title="需重新提交"><br/>
        <input type="radio" name="res" value="暂不合作" title="暂不合作"><br/>

        <div class="layui-form-item" style="margin-top: 8px; border: solid 1px rgba(198,198,198,0.65)">
                <input type="text" name="note" placeholder="输入审核备注："
                       style="width: 200px" class="layui-input">
        </div>

        <div class="layui-form-item" style="text-align: center">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="editApp">确定修改</button>
        </div>
    </form>

</script>

<!--分页组件-->
<table id="merchantTable" lay-filter="merchantTable"></table>

<script th:inline="javascript" type="text/javascript">
    let currentMerchantId;// 当前点击的商户id,给个变量
    layui.use(['layer', 'table', 'form'], function () {
        // 我再js代码里边如何获取控制器传递过来的参数呢？
        let layer = layui.layer;// 弹出层
        let table = layui.table;// 分页组件
        let form = layui.form;// 分页组件
        // layer.msg('弹出一个消息', {icon: 1});

        //第一个实例
        let tb = table.render({// 渲染表格
            elem: '#merchantTable'
            , url: '/pages/back/merchant/ajaxList' //服务后台的数据接口
            , page: true //开启分页
            , cols: [[ //表头，这里是两个[[开头，两个]]结尾
                {field: '', type: 'checkbox', title: '多选'}
                , {
                    field: 'merchantId', title: '商户号', width: '160', templet: function (d) {
                        let div = "<div><button class='layui-btn layui-btn-xs layui-btn-danger' " +
                            "lay-event='approvalLog'>审核</button><span>" + d.merchantId + "</span></div>"
                        return div;
                    }
                }
                , {field: 'shopName', title: '店铺名称', width: 130, edit: 'text'}
                , {
                    field: 'approvalStatus', title: '审核状态', width: 130, templet: function (d) {
                        let color = d.approvalStatus == '审核中' ? 'red' : d.approvalStatus == '审核通过' ? 'green' : d.approvalStatus == '暂不合作' ? 'gray' : d.approvalStatus == '需重新提交' ? 'orange' : '';
                        let img = "<div><span style='color:" + color + "' >" + d.approvalStatus + "</span><button class='layui-btn layui-btn-xs " +
                            "layui-btn-normal' style='margin-left: 8px' lay-event='approvalEdit'>修改</button></div>"
                        return img;
                    }
                }
                , {field: 'isOpen', title: '营业状态', width: 100}
                , {field: 'userId', title: '用户Id', width: 80}
                , {field: 'contactName', title: '联系人', width: 80, edit: 'text'}
                , {field: 'phone', title: '手机号', width: 100, edit: 'text'}
                , {
                    field: 'doorImg', title: '门脸照', width: 80, templet: function (d) {
                        let img = "<div><img showBig style='width: 50px;height: 50px;border-radius: 5px' src=" + d.doorImg + "/></div>"
                        return img;
                    }
                }
                , {
                    field: 'shopLogo', title: '店铺Logo', width: 80, templet: function (d) {
                        let imgDiv = "<div><img showBig style='width: 50px;height: 50px;border-radius: 5px' src=" + d.shopLogo + "/></div>"
                        return imgDiv;
                    }
                }
                , {field: 'pcd', title: '省市区', width: 200, edit: 'text'}
                , {field: 'address', title: '地址', width: 200, edit: 'text'}
                , {
                    field: 'location', title: '坐标', width: 60, templet: function (d) {
                        let imgDiv = "<div><button class='layui-btn layui-btn-xs' lay-event='showMerchantMap'>查看</button></div>"
                        return imgDiv;
                    }
                }
                , {field: 'street', title: '街道', edit: 'text'}
                , {field: 'email', title: '邮箱', width: 160, edit: 'text'}
                , {
                    field: 'title1', title: '店铺标题', width: 160, templet: function (d) {
                        let div = "<div style='font-size: 12px;padding: 0'><div style='line-height: 14px'>" + d.title1 + "</div><div style='line-height: 14px'>" + d.title2 + "</div><div style='line-height: 14px' >" + d.title3 + "</div></div>"
                        return div;
                    }
                }
                , {field: 'minPrice', title: '起送价格', width: 80, edit: 'text'}
                , {field: 'minPrice', title: '营业时间', width: 160, edit: 'text'}
                , {field: 'takeawayPhone', title: '外卖电话', width: 100, edit: 'text'}
                , {field: 'isPlatSend', title: '平台配送', width: 80,}
                , {field: 'maxDeliveryArea', title: '配送距离', width: 80,}
            ]]
            , done() {// done函数：表格渲染完成之后，也就是图片都被渲染好了，给这些图片绑定点击事件
                showBigImg();// 渲染大图查看，给这些图片绑定点击事件
            }
        });
        let addOpen;
        let logOpen;
        let logsTb;

        // 监听搜索项
        form.on('submit(queryForm)', function (data) {
            //  表单重新渲染，根据xx条件
            tb.reload({
                where: data.field
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //监听行中工具条
        table.on('tool(merchantTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let d = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            switch (layEvent) {
                case 'approvalLog':
                    // 审核日志弹出框
                    currentMerchantId = d.merchantId;
                    logOpen = layer.open({// 弹框之后，如遇到select标签，radio,checkbox之类，需要使用表单渲染
                        type: 1,
                        offset: '10px',
                        area: '88%',
                        title: "审核日志记录",
                        shadeClose: true,
                        content: $("#logDiv").html()
                    });
                    let tbody = $("#tbody");
                    tbody.empty();
                    tbody.append($("<tr >\n" +
                        "                <td><img src='" + d.shopLogo + "' showBig style=\"height: 100px\"></td>\n" +
                        "                <td><img src='" + d.doorImg + "' showBig style=\"height: 100px\"></td>\n" +
                        "                <td><img src='" + d.interiorImg + "' showBig style=\"height: 100px\"></td>\n" +
                        "                <td><img src='" + d.cardUserImg + "' showBig style=\"height: 100px\"></td>\n" +
                        "                <td><img src='" + d.cardGuohuiImg + "' showBig style=\"height: 100px\"></td>\n" +
                        "                <td><img src='" + d.cardHandImg + "' showBig style=\"height: 100px\"></td>\n" +
                        "                <td><img src='" + d.businessLicenseImg + "' showBig style=\"height: 100px\"></td>\n" +
                        "                <td><img src='" + d.securityPermitImg + "' showBig style=\"height: 100px\"></td>\n" +
                        "                <td><img src='" + d.otherVoucherImg + "' showBig style=\"height: 100px\"></td>\n" +
                        "            </tr>"));

                    showBigImg();
                    logsTb = table.render({// 渲染日志表格
                        elem: '#approvalLogsTable'
                        , url: '/pages/back/approval/getMerchantLogsById/' + d.merchantId //服务后台的数据接口
                        , page: true //开启分页
                        , limit: 5 //开启分页
                        , cols: [[ //表头，这里是两个[[开头，两个]]结尾
                            {field: 'createTime', title: '时间', width: 200}
                            , {field: 'note', title: '备注', width: 300,}
                            , {
                                field: 'res', title: '审核结果', width: 200, templet: function (d) {
                                    let color = d.res == '审核中' ? 'red' : d.res == '审核通过' ? 'green' : d.res == '暂不合作' ? 'gray' : d.res == '需重新提交' ? 'orange' : '';
                                    let div = "<div><span style='color:" + color + "' >" + d.res + "</span></div>"
                                    return div;
                                }
                            }
                            , {field: 'approvalUserId', title: '审核人Id', width: 80,}
                            , {field: 'approvalUserName', title: '审核人名字', width: 100,}
                        ]]
                        , toolbar: 'default'
                    });
                    break;
                // 修改审核状态
                case 'approvalEdit':

                    let editOpen = layer.open({// 弹框之后，如遇到select标签，radio,checkbox之类，需要使用表单渲染
                        type: 1,
                        offset: '30px',
                        // area: '40%',
                        title: "审核状态",
                        shadeClose: true,
                        content: $("#editLogDiv").html()
                    });
                    let checked = d.approvalStatus
                    // let i = $("#editLogDiv input[value='"+checked+"']")
                    apps = document.getElementsByName("res")
                    for ( i=0;i<apps.length;i++){
                        if (apps[i].value==checked){
                            apps[i].checked = true
                        }
                    }
                    form.render();
                    // 监听审核修改
                    form.on('submit(editApp)',function (data) {
                        console.log(data.field)
                        $.post('/pages/back/approval/doApproval/'+d.merchantId,data.field,function (res) {
                            tb.reload()
                            layer.close(editOpen)
                        })
                        return false;
                    })

                    break;
                case 'deleteData':
                    // 有没有数组？
                    let merchants = [];
                    merchants.push(d);
                    layer.confirm('您确定操作吗?', function (index) {
                        // 第一步，拿到所有选中的行的角色id
                        deleteMerchants(merchants, layer, tb);// 批量删除角色
                        layer.close(index);
                    });
                    break;
            }
        });
        // 表格编辑
        table.on('edit(merchantTable)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            // 没必要传多余的数据过去
            let p = {};
            p.merchantId = obj.data.merchantId;
            p[obj.field] = obj.value;
            $.post('/pages/back/merchant/editMerchant', p, function (res) {
                    layer.msg(res.msg);
                }
            );
        });
        // 单选监听
        form.on('radio(isOpenFilter)', function (data) {
            $("#queryBtn").click();
        });
    });

    $("#delBtn").on('click',function () {
        layer.msg("删除")
    })

    // 监听搜索框
    $("#queryForm input").on('input',function () {
        $("#queryBtn").click();
    })



</script>

<style>
    .testCls {
        color: red;
    }
</style>
</body>

</html>
